/**
* 设备选择器
*/
<template>
  <div>
    <!-- 搜索筛选 -->
    <el-form :inline="true" :model="formInline" class="user-search">
      <el-form-item>
        <el-select
          v-if="showProduct"
          size="small"
          v-model="formInline.productKey"
          placeholder="请选择产品"
        >
          <el-option
            v-for="pro in products"
            :label="pro.name"
            :value="pro.id"
            :key="pro.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-input
          size="small"
          v-model="formInline.deviceName"
          placeholder="输入设备DN"
        >
          <el-button
            slot="append"
            icon="el-icon-search"
            @click="search"
          ></el-button>
        </el-input>
      </el-form-item>
    </el-form>
    <!--列表-->
    <el-table
      size="small"
      :data="listData"
      highlight-current-row
      v-loading="$store.state.loading"
      border
      element-loading-text="拼命加载中"
      style="width: 100%"
    >
      <el-table-column
        v-if="showProduct"
        sortable
        prop="productName"
        label="产品"
        width="250"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        v-if="showDeviceId"
        sortable
        prop="deviceId"
        label="设备ID"
        width="250"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        sortable
        prop="deviceName"
        label="设备DN"
        width="150"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column align="left" min-width="150">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            @click="selectDevice(scope.$index, scope.row)"
            >选择</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <Pagination :data="formInline" @onPagePaging="search"></Pagination>
  </div>
</template>

<script>
// import { DeviceList } from '../../api/deviceApi'
// import { ProductList } from '../../api/productApi'
import Pagination from './Pagination'
export default {
  name: 'DeviceSelector',
  props: {
    param: {
      type: Object,
      default: () => {
        return {
          pk: ''
        }
      }
    },
    showDeviceId: {
      type: Boolean,
      default: () => {
        return false
      }
    },
    showProduct: {
      type: Boolean,
      default: () => {
        return true
      }
    }
  },
  data () {
    return {
      loading: false, // 是显示加载
      title: '',
      formInline: {
        page: 1,
        size: 10,
        total: 0,
        productKey: '',
        deviceName: ''
      },
      products: {},
      listData: [],
      productMap: {}
    }
  },
  // 注册组件
  components: {
    Pagination
  },
  created () {
    if (this.param.pk) {
      this.formInline.productKey = this.param.pk
    }
    this.getdata(this.formInline)
  },
  methods: {
    getdata (parameter) {
      // ProductList(parameter).then((res) => {
      //   this.products = res.data
      //   res.data.forEach((p) => {
      //     this.productMap[p.id] = p.name
      //   })

      //   DeviceList(parameter).then((res) => {
      //     res.data.forEach((d) => {
      //       d.productName = this.productMap[d.productKey]
      //     })
      //     this.listData = res.data
      //     this.formInline.total = res.total
      //   })
      // })
    },
    search () {
      this.getdata(this.formInline)
    },
    selectDevice (index, row) {
      this.$emit('deviceSelected', row)
    }
  }
}
</script>
